<template>
  <el-card class="blueCard">
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
    <template #header>
      <div @click.prevent="turnToMessage()" class="oneLine el-card-title">
        公告看板
        <svg-icon icon-class="more" size="12" />
      </div>
    </template>

    <div
      v-for="item in noticeList"
      :key="item.id"
      class="cardList oneLine"
      @click.prevent="turnToMessage(item.id)"
    >
      <span class="oneLine">{{ item.title }}</span>
    </div>
    <div class="noData" v-if="!noticeList.length && noticeRequestEnd">
      <img
        src="../../../../assets/images/noData.png"
        width="150"
        alt="暂无数据"
      />
    </div>
  </el-card>
  <Teleport to="body">
    <sysnotice-detail
      :visible="addDialog.visible"
      :title="addDialog.title"
      :data="addDialog.data"
      @change-visible="changeVisible"
    />
  </Teleport>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import { useUserStoreHook } from "@/store/modules/user";
import router from "@/router";

const userStore = useUserStoreHook();
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
  activeShow: {
    type: Boolean,
    default: () => {},
  },
});
const { panelSetIcon, id, url } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const addDialog = reactive<DialogOption>({
  visible: false,
  title: "",
  data: {},
});

const query = {
  current: 1,
  size: 7,
  data: {},
};

interface ListType {
  title?: string;
  id: string;
}
// 获取消息看板
const noticeList = ref<ListType[]>([]);
const noticeRequestEnd = ref(false);
async function getNoticeList() {
  const { data } = await request({
    url: `/system/sysnotice/queryByPage`,
    method: "post",
    data: query,
  }).finally(() => {
    noticeRequestEnd.value = true;
  });
  noticeList.value = data;
}

// function turnToMessage(type: number, id?: string) {
//   const url =
//     type === 1
//       ? "/workbench/sysmessage"
//       : type === 2
//       ? "/workbench/mySysnotice"
//       : "";
//   if (id) userStore.setLinkId(id);
//   router.push({
//     path: url,
//   });
// }

// 查询详情
async function getSystemRole(id: string) {
  const { data } = await request({
    url: `/system/sysnotice/get/${id}`,
    method: "get",
  });
  addDialog.data = data;
}

// 携参跳转对应页面
async function turnToMessage(id?: string) {
  if (!id) {
    return router.push({
      path: "/workbench/mySysnotice",
    });
  }
  await getSystemRole(id as string);
  addDialog.title = "公告详情";
  addDialog.visible = true;
}

function changeVisible(value: boolean) {
  addDialog.visible = value;
  if (!value) {
    addDialog.data = {};
  }
}

onMounted(() => {
  getNoticeList();
});
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: rgba(107, 104, 254, 0.9);
  cursor: pointer;
}
:deep(.el-card__body) {
  padding: 0px 10px !important;
  height: calc(100% - 67px);
  .noData {
    display: flex;
    justify-content: center;
    margin-top: 35px;
    color: rgb(232, 250, 234);
  }
  .cardList {
    height: 14.5%;
    padding: 0px 15px;
    display: flex;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px dashed rgba(212, 219, 249, 0.5);
    cursor: pointer;
    span:nth-child(1) {
      font-size: 14px;
      color: #999;
    }
  }
  .cardList:nth-last-child(1) {
    border-bottom: none !important;
  }
  .cardList:hover {
    box-shadow: 0 3px 5px rgba(39, 83, 255, 0.1);
  }
}
:deep(.el-card__header) {
  padding: 10px;
}

.svg-icon {
  fill: currentcolor !important;
}

.el-icon-close {
  top: 16px !important;
  right: 16px !important;
}
.blueCard {
  :deep(.el-card__header) {
    border-bottom: none;
    font-size: 14px;
    padding: 12px 20px;
    margin: 5px;
    border-radius: 6px;
    font-weight: 600;
    background: rgba(212, 219, 249, 0.3);
    cursor: pointer;
    color: rgba(107, 104, 254, 0.7);
  }
  :deep(.el-card__body) {
    .cardList {
      border-bottom: 1px dashed rgba(64, 158, 255, 0.15);
    }
    .cardList:hover {
      box-shadow: 0 3px 5px rgba(64, 158, 255, 0.2);
    }
  }
}
</style>
